<template>
  <div class="content-view  scroll-base">
    <div class="infos">
      <p>
        <el-text size="large" tag="b">
          平台用户
          <el-text type="info" size="large">[机构/公司]</el-text>
          信息
        </el-text></p>
      <p>
        <el-text>机构/公司名称：{{baseInfo.name}}</el-text>
         <el-text>加入日期：{{baseInfo.create_date}}</el-text>
      </p>
      <p>
        <el-text>机构/公司联系人：{{baseInfo.contact}}</el-text>
        <el-text>联系电话：{{baseInfo.phone}}</el-text>
      </p>
      <p>
        <el-text>机构/公司地址：{{baseInfo.allAddress}}</el-text>
      </p>
    </div>
    <div style="padding:15px 25px;">
      <el-text size="large">当前平台用户类型为 </el-text>
      <el-tag size="large" style="font-size: 16px;">{{baseInfo.type}}</el-tag>
      <el-text size="large"> 可操作以下功能模块</el-text>
      <el-text size="large">，如提示</el-text>
      <el-text size="large" type="warning">未授权的操作</el-text>
      <el-text size="large">请联系上级操作员赋予权限</el-text>
    </div>
    <div class="btns">
      <div v-for="item in cardBtn" :key="item.id">
        <div class="title">
          <el-text :type="item.color" size="large" tag="b">{{item.title}}</el-text>
        </div>
        <div class="item" v-for="t in item.items" :key="t.id">
          <p>
            <el-button :type="item.color" plain @click="openCard(t.name,t.title)">{{t.title}}</el-button>
            <i v-if="t.name=='base_factory'">管理安卓设备主板厂商的基本信息，包含厂商名称、联系人、电话、地址信息</i>
            <i v-if="t.name=='base_board'">管理安卓设备主板的基本信息，包含主板型号以及所属主板厂商的基本信息</i>
            <i v-if="t.name=='base_rom'">管理安卓设备的系统固件信息，同一主板会有不同的固件，同一固件会包含多个版本，主要用于安卓设备的系统升级功能</i>
            <i v-if="t.name=='base_devtype'">管理设备型号基本信息，设备型号绑定系统固件，型号详情可标注硬件配置信息</i>
            <i v-if="t.name=='device_factory'">管理已绑定未出厂的设备，可在此模块下对终端设备设置型号，分配所属用户</i>
            <i v-if="t.name=='client_list'">管理平台用户基本信息，包含用户（机构/公司）的名称、联系人、电话、地址等信息</i>
            <i v-if="t.name=='base_operator'">管理平台操作员信息，可对操作员进行设置权限、更改状态、重置密码等操作</i>
            <i v-if="t.name=='device_list'">可查看终端设备的配置参数及已安装的应用列表</i>
            <i v-if="t.name=='device_app'">对选定的终端设备进行安装应用、卸载应用、设置开机启动操作</i>
            <i v-if="t.name=='device_system'">对选定的终端设备进行系统升级或恢复出厂设置操作</i>
            <i v-if="t.name=='device_reset'">对选定的终端设备进行关机重启操作</i>
            <i v-if="t.name=='base_assist'">远程协助操作说明及windows端远程工具的下载</i>
            <i v-if="t.name=='apps_list'">上传应用</i>
            <i v-if="t.name=='apps_store'">应用商店应用上下架</i>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import mqtt from '@/assets/js/mqtt'
import { ElNotification } from 'element-plus'
import util from '@/assets/js/util'
export default {
  props:['data'],
  setup(props,ctx) {
    const Global = getCurrentInstance().proxy
    let user = reactive({
      id: Global.$var.user.id,
      username: Global.$var.user.username,
      power: Global.$var.user.power,
      platUser: Global.$var.user.platUser,
    })

    onMounted(()=>{
      init()
      mqttOnMsg()
    })

    let loading = ref(false)
    function mqttOnMsg() {
       mqtt.onMsg((t,m)=>{
         loading.value = false
          let r = JSON.parse(m)
          if (r.data.returnCode == 10000) {
            let d = r.data.data
            if (r.msgType == 57) {
              // console.log('权限：',d)
              Global.$var.authorities = d
            }
          }  
       })
    }

    let baseInfo = reactive({
      name:'',
      create_date: '',
      contact: '',
      phone: '',
      allAddress: '',
      type: '',
    })
    let cardBtn = ref([])
    function init() {
      let u = user.platUser || {}
      let d = util.formatGmt(u.create_date)
      let a = u.address || {}
      baseInfo.name = u.name
      baseInfo.create_date = d.indexOf(' ')>=0?d.split(' ')[0]:d
      baseInfo.contact = u.contact
      baseInfo.phone = u.phone
      baseInfo.allAddress = a.province+a.city+a.district+a.addr
      baseInfo.type = util.cilentType(u.scope || '')
      let md = Global.$const.MENU_DATA;
    //console.log(md)
      let btns = []
      for (let i in md) {
        let n = md[i].name
        if (n == 'base') md[i].color = 'primary'
        if (n == 'client') md[i].color = 'warning'
        if (n == 'device') md[i].color = 'success'
        if (n == 'apps') md[i].color = 'danger'
      //console.log(user.power)
        if (user.power > 90) {
          btns.push(md[i])
        } else if (user.power > 80) {
          if (n == 'client' || n == 'device' || n == 'apps') {
            btns.push(md[i])
          }
        } else {
          if (n == 'device') {
            btns.push(md[i])
          }
        }
      }
      cardBtn.value = btns
    }

    function openCard(n,t) {
      let e = {}
      e.n = n
      e.t = t
      ctx.emit("mainCard", e);      
    }

    return{
      user,loading,baseInfo,cardBtn,openCard
    }
  },
}
</script>

<style lang="scss" scoped>
.content-view{
  padding: 15px 30px;
  overflow-y: auto;
  .infos{
    width: 100%;
    box-shadow: 1px 1px 5px #eee; 
    padding: 5px 30px;   
    p{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }
  .btns{
    padding: 0 25px;
    .item{
      width: 100%;
      padding: 0 10px;
      p{
        display: block;
        word-break: break-all;
        i{
          margin: 0 10px;
          font-style: normal;
          color: #666;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>